<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Window</title>
</head>

<body>
  <input type="button" value="Open1" onclick="open1()">
  <input type="button" value="Open2" onclick="open2()">
  <input type="button" value="Open3" onclick="open3()">
  
  <script>
    window.onload = function () {

      // ------- Global -------
      // 因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

      // ------- 窗口关系 ------- 
      //  window.parent 
      //  window.top 
      //  window.self
      console.log(window);
      console.log(window.parent);
      console.log(window.top);
      console.log(window.self);

      // 相对于当前视口向下滚动 100 像素
      window.scrollBy(0, 100);
      // 相对于当前视口向右滚动 40 像素
      window.scrollBy(40, 0);
      // 滚动到页面左上角
      window.scrollTo(0, 0);
      // 正常滚动
      window.scrollTo({
        left: 100,
        top: 100,
        behavior: 'auto'
      });

      // 平滑滚动
      window.scrollTo({
        left: 100,
        top: 100,
        behavior: 'smooth'
      });

      // ------- 系统对话框 -------
      //  alert()
      // 【参数】message 提示信息
      // 【没有返回值】
      // let res1 = alert("弹出提示框");
      // alert(res1);

      // confirm()
      //【参数】message 提示信息
      //【返回值】点击确认返回true, 点击取消返回false
      // let res2 = confirm("取消还是确认呀？");
      // console.log(res2);

      // prompt()
      // 【参数】第一个参数：提示信息 第二个参数：输入框内默认内容默认
      // 【返回值】输入框内容
      // let res3 = prompt("请输入内容", "ok");
      // console.log(res3);
    }

    // ------- 导航与打开新窗口------- 
    // open()
    //【单参数】 新窗口打开的链接地址
    function open1() {
      window.open("https://www.baidu.com");
    }
    //【参数1】 新窗口打开的链接地址
    //【参数2】 重复打开会复用上次打开的标识符相同的窗口
    function open2() {
      window.open("https://www.baidu.com", "baidu");
    }
    // 【参数3】打开新窗口，设置属性
    function open3() {
      let bdWin = window.open("https://www.baidu.com", "baidu1", "height=400,width=400,top=10,left=10,resizable=yes")
      // 缩放
      bdWin.resizeTo(500, 500);
      // 移动
      bdWin.moveTo(100, 100);
      // 还可以使用 close()方法像这样关闭新打开的窗口：
      // bdWin.close();
      // opener open方法调用者
      alert(bdWin.opener === window); // true
    }

    // 定时器
    // setTimeout()方法通常接收两个参数：要执行的代码和在执行回调函数前等待的时间（毫秒）。
    //【参数】
    // 第一个参数 可以是包含 JavaScript 代码的字符串（类似于传给 eval()的字符串）或者一个函数
    // 第二个参数 是要等待的毫秒数，而不是要执行代码的确切时间。
    //【返回值】 
    // 返回一个表示该超时排期的数值 ID
    let timeoutId =  window.setTimeout(() => {
      console.log("1 秒结束");
    }, 1000);

    // 取消超时任务
    window.clearTimeout(timeoutId);

    // setInterval 
   let intervalId = window.setInterval(()=>{
      console.log("间隔1秒");
    }, 1000);
    // 取消间隔任务
    window.clearInterval(intervalId);

  </script>
</body>

</html>